<template>
  <el-container class="full">
    <el-main class="content">
      <h2>家庭医生签约服务平台</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="userName">
          <el-input
            v-model="ruleForm.userName"
            size="large"
            class="input"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passPwd">
          <el-input
            v-model="ruleForm.passPwd"
            class="input"
            show-password
            prefix-icon="el-icon-unlock"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      ruleForm: {
        userName: "",
        passPwd: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        passPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { max: 6, message: "长度为 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            url: "/login",
            method: "post",
            data: this.ruleForm,
          })
            .then((res) => {
              console.log(res)
              if (res.data.code === 200) {
                sessionStorage.setItem("isLogin",true)
                sessionStorage.setItem("userInfo",JSON.stringify(this.ruleForm))
                this.$router.push("/home");
                this.$message({
                  message: "登录成功",
                  type: "success",
                  duration: 2500,
                });
              }else if(res.data.code===404){
                this.$message.error('用户名或密码错误');
              }
            })
            .catch((err) => {
               this.$message.error("提交错误，请重新输入");
            });
        } else {
          this.$message.error("提交错误，请重新输入");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.full {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
}
.content {
  width: 25%;
  height: 400px;
  min-height: 400px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: white;
  // background-color: rgb(58, 93, 124);
  margin: auto;
}
.content h2 {
  margin-bottom: 30px;
}
.input {
  height: 70px;
  line-height: 70px;
  font-size: 15px;
}
/deep/ .el-input__inner {
  height: 50px;
  padding: 0 40px;
  background-color: #283443;
  color: white;
  border: none;
  border: 1px solid gray;
}
.btn {
  width: 100%;
}
</style>
